<template>
  <view v-if="isShow">
    <view @click="close" :class="{'date-mask-show': timeMaskShow}" class="date-mask"></view>
    <view :class="{'fadelogIn': timeMaskShow}" class="date">
      <view class="date-title u-flex u-row-between">
        <view @click="close" class="btn close">取消</view>
        <view class="title u-flex-1 u-font-30 u-text-center">{{title}}</view>
        <view @click="confirm" class="btn confirm">确认</view>
      </view>
      <view class="date-list u-font-30 u-text-center u-flex">
        <view @click="tabTap(index)" :class="{active: tabActive == index}" class="item u-flex-1" v-for="(item,index) in tabList" :key="index">{{item}}</view>
      </view>
      <view class="date-select u-m-t-30">
        <swiper :current="tabActive" class="swiper">
          <swiper-item>
            <picker-view @change="bindChange($event, 1)" :indicator-style="indicatorStyle" :value="startDate" class="swiper-item">
              <picker-view-column>
                <view v-for="(item, index) in yearList" :key="index" class="item u-flex u-col-center u-row-center">{{item}}年</view>
              </picker-view-column>
              <picker-view-column>
                <view v-for="(item, index) in monthList" :key="index" class="item u-flex u-col-center u-row-center">{{item}}月</view>
              </picker-view-column>
            </picker-view>
          </swiper-item>
          <swiper-item>
            <picker-view @change="bindChange($event, 2)" :indicator-style="indicatorStyle" :value="endDate" class="swiper-item">
              <picker-view-column>
                <view v-for="(item, index) in yearList" :key="index" class="item u-flex u-col-center u-row-center">{{item}}年</view>
              </picker-view-column>
              <picker-view-column>
                <view v-for="(item, index) in monthList" :key="index" class="item u-flex u-col-center u-row-center">{{item}}月</view>
                <view class="item u-flex u-col-center u-row-center">至今</view>
              </picker-view-column>
            </picker-view>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "come-datetime",
  data() {
    return {
      isShow: false,
      timeMaskShow: false,
      tabList: ["入职时间", "离职时间"],
      tabActive: 0,
      startDate: [],
      endValue: [],
      indicatorStyle: "height: 50px;",
      yearList: [],
      monthList: [],
      year: "",
    };
  },
  props: {
    title: {
      type: String,
      default: "时间段",
    },
  },
  mounted() {
    let year = new Date().getFullYear();
    let month = new Date().getMonth();
    this.startDate = [80 - (2030 - year), month];
    this.endDate = [80 - (2030 - year), month + 1];
    let yearList = [],
      monthList = [];
    for (let i = 1950; i <= year; i++) {
      yearList.push(i);
    }
    for (let i = 1; i <= month + 1; i++) {
      monthList.push(i);
    }
    this.yearList = yearList;
    this.monthList = monthList;
    this.year = year;
  },
  methods: {
    // 选项卡
    tabTap(index) {
      this.tabActive = index;
    },
    // 选择时间段
    bindChange(e, type) {
      let array = e.detail.value;
      let month = new Date().getMonth() + 1;
      let monthList = [];
      if (this.year == array[0] + 1950) {
        for (let i = 1; i <= month; i++) {
          monthList.push(i);
        }
      } else {
        for (let i = 1; i <= 12; i++) {
          monthList.push(i);
        }
      }
      this.monthList = monthList;
      if (type == 1) this.startDate = array;
      else this.endDate = array;
    },
    // 确认按钮
    confirm() {
      let startDate = this.startDate;
      let endDate = this.endDate;
      if (startDate[0] > endDate[0]) {
        return this.$u.toast("结束时间要大于开始时间~");
      } else {
        if (startDate[1] > endDate[1]) {
          return this.$u.toast("结束时间要大于开始时间~");
        }
      }
      this.$emit("confirm", {
        startDate: `${this.startDate[0] + 1950}年${this.startDate[1] + 1}月`,
        endDate:
          this.endDate[1] <= this.monthList.length - 1
            ? `${this.endDate[0] + 1950}年${this.endDate[1] + 1}月`
            : "至今",
      });
      this.close();
    },
    // 打开日历弹窗
    open() {
      this.isShow = true;
      this.$nextTick(() => {
        setTimeout(() => {
          this.timeMaskShow = true;
        }, 50);
      });
    },
    // 关闭弹窗
    close() {
      this.timeMaskShow = false;
      this.$nextTick(() => {
        setTimeout(() => {
          this.isShow = false;
          this.$emit("close");
        }, 500);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.date-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $uni-bg-color-mask;
  transition-property: opacity;
  transition-duration: 0.3s;
  opacity: 0;
  /* #ifndef APP-NVUE */
  z-index: 999;
  /* #endif */
}

.date {
  position: fixed;
  bottom: calc(var(--window-bottom));
  right: 0;
  left: 0;
  z-index: 1000;
  height: 750rpx;
  background-color: $uni-bg-color;
  transition-property: transform;
  transition-duration: 0.3s;
  transform: translateY(460px);

  &-title {
    height: 80rpx;

    .btn {
      width: 100rpx;
      color: $uni-text-color-grey;
      font-size: 28rpx;
      text-align: center;

      &.confirm {
        color: $uni-text-color-main;
      }
    }

    .title {
      font-weight: bold;
    }
  }

  &-list {
    line-height: 70rpx;

    .item {
      &.active {
        position: relative;
        color: $uni-text-color-main;

        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 60rpx;
          height: 2px;
          background-color: $uni-bg-color-main;
        }
      }
    }
  }

  &-select {
    .swiper {
      height: 500rpx;
    }

    .swiper-item {
      height: 500rpx;

      .item {
        height: 50px;
      }
    }
  }
}

.date-mask-show {
  opacity: 1;
}

.fadelogIn {
  transform: translateY(0);
}
</style>